<template>
  <div class="app-container">
    <el-dialog :title="pageTitle" :visible.sync="dialogFormVisible" :before-close="beforeClose" width="80%">
      <el-form :label-position="labelPosition">

        <div v-for="val in form" :key="val.id" class="border_input">
          <el-form-item label="会员等级：" :label-width="formLabelWidth">
            {{ val.level }} ( 等级从0开始 )
          </el-form-item>

          <el-form-item label="会员等级名称：" :label-width="formLabelWidth">
            <el-input v-model="val.title" minlength="1" maxlength="10" placeholder="请输入会员等级名称" @change="getName($event, val.level)" />
          </el-form-item>

          <el-form-item label="标记合伙人：" :label-width="formLabelWidth">
            <template>
              <div>
                <el-radio-group v-model="val.copartner" @change="setCopartner($event, val.level)">
                  <el-radio-button :label="0">非合伙人</el-radio-button>
                  <el-radio-button :label="1">合伙人</el-radio-button>
                </el-radio-group>
              </div>
            </template>
          </el-form-item>

          <div v-if="val.copartner == 0">
            <el-form-item label="购买要求：" :label-width="formLabelWidth">
              最低 <el-input-number v-model="val.jf_num" :min="0" size="medium" controls-position="right" /> 零售价
            </el-form-item>

            <el-form-item label="积分要求：" :label-width="formLabelWidth">
              最低 <el-input-number v-model="val.jf" :min="0" size="medium" controls-position="right" /> 积分
            </el-form-item>

            <el-form-item label="推荐要求最少人数(选填)：" :label-width="formLabelWidth">
              <template>
                最少 <el-input-number v-model="val.recommend.num" controls-position="right" :min="0" :max="100" /> 人
              </template>
            </el-form-item>

            <el-form-item label="推荐要求最小等级(选填)：" :label-width="formLabelWidth">
              <template>
                <el-select v-model="val.recommend.grade" placeholder="邀请的会员最小等级" @change="getGrade($event, val.level)">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-form-item>
          </div>
          <div v-if="val.copartner == 1">
            <el-form-item label="直推人数要求(合伙人必填)：" :label-width="formLabelWidth">
              最低 <el-input-number v-model="val.direct_num" :min="0" size="medium" controls-position="right" /> 人
            </el-form-item>

            <el-form-item label="团队人数要求(合伙人必填)：" :label-width="formLabelWidth">
              最低 <el-input-number v-model="val.team_num" :min="0" size="medium" controls-position="right" /> 人
            </el-form-item>

            <el-form-item label="团队销售额(合伙人必填)：" :label-width="formLabelWidth">
              最低 <el-input-number v-model="val.team_sales" :min="0" size="medium" controls-position="right" /> 零售价
            </el-form-item>
          </div>

          <el-form-item label="会员等级描述：" :label-width="formLabelWidth">
            <el-input
              v-model="val.describe"
              type="textarea"
              :rows="2"
              placeholder="会员等级描述"
            />
          </el-form-item>

          <el-form-item label="会员等级图标：" :label-width="formLabelWidth">
            <template>
              <el-select v-model="val.icon" placeholder="请选择">
                <el-option
                  v-for="item in iconArr"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </template>
          </el-form-item>

          <el-form-item label="会员等级卡：" :label-width="formLabelWidth">
            <template>
              <div>
                <el-radio-group v-model="val.type" @change="getRadio($event, val.level)">
                  <el-radio-button :label="1">背景图</el-radio-button>
                  <el-radio-button :label="2">渐变色</el-radio-button>
                </el-radio-group>
              </div>
            </template>

            <div v-if="val.type === 2" class="block">
              <span class="demonstration">起始渐变色</span>
              <el-color-picker v-model="val.color_first" />
              <span class="demonstration">终止渐变色</span>
              <el-color-picker v-model="val.color_second" />
            </div>

            <div v-if="val.type == 1" class="block">
              <el-upload action="#" list-type="picture-card" :limit="1" :file-list="[{name: 'bc.jpeg', url: val.bc_img}]" :auto-upload="false">
                <i slot="default" class="el-icon-plus" />
                <div slot="file" slot-scope="{file}">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                  >
                  <span class="el-upload-list__item-actions">
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete" />
                    </span>
                  </span>
                </div>
              </el-upload>
            </div>
          </el-form-item>
        </div>

      </el-form>
      <el-row>
        <el-button type="danger" round plain @click="del">减少会员</el-button>
        <el-button type="success" round plain @click="add">增加会员</el-button>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canel">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { iniGrade, handle } from '@/api/grade'
export default {
  name: 'GradeHandle',
  data() {
    return {
      labelPosition: 'right',
      formLabelWidth: '220px',
      pageTitle: '店铺等级编辑界面',
      dialogFormVisible: false,
      id: '',
      title: '',
      options: [], // label 文字 / value 等级
      form: [
        {
          level: '',
          title: '',
          jf_num: '',
          jf: '',
          recommend: { 'grade': 0, 'num': 0 },
          describe: '',
          icon: '',
          type: 2,
          color_first: '#cba071',
          color_second: '#e1bf83',
          bc_img: '',
          cardIni: { 'type': 2, 'color_first': '#cba071', 'color_second': '#e1bf83', 'bc_img': '' },
          copartner: 0,
          direct_num: '',
          team_num: '',
          team_sales: ''
        }
      ],
      iconValue: '',
      iconArr: [], // label 文字类名 / value 文字类名 - 会添加样式 在选项左边显示图标
      disabled: false
    }
  },

  methods: {
    beforeClose() {
      this.canel()
    },

    // 进入界面事件
    ini(id, title) {
      // 初始化 店铺等级 数据
      this.id = id
      this.title = title
      this.listLoading = true
      this.dialogFormVisible = true
      this.pageTitle = '[' + this.id + ': ' + this.title + '] 店铺等级编辑界面'

      var params = {}
      params.id = id

      this.iniGrade(params)
    },

    // 初始化界面赋值
    iniGrade(params) {
      iniGrade(params).then(response => {
        this.form = response.data.data
        this.options = response.data.grade
        this.iconArr = response.data.iconArr
        console.log(this.form)
        console.log(this.options)
      })
    },

    // 会员名字改变 - 推荐下拉的选项更改
    getName(e, grade) {
      this.options[grade].label = e
    },

    // 下拉选择推荐的会员等级事件[ 选择的值 / 当前会员等级 ] - 如果选中了比当前等级高的 , 不会被修改 并 提示 不能选择比当前等级高的推荐用户
    getGrade(e, level) {
      console.log(e)
      console.log(level)
      if (e > level) {
        this.form[level].recommend.grade = 0
        this.$message({
          showClose: true,
          message: '所需推荐会员的等级不能高于自身等级!',
          type: 'warning'
        })
      }
    },

    // 等级卡样式单选 - 隐藏 / 显示
    getRadio(e, grade) {
      if (e === this.form[grade].cardIni.type) {
        this.form[grade].type = this.form[grade].cardIni.type
        this.form[grade].color_first = this.form[grade].cardIni.color_first
        this.form[grade].color_second = this.form[grade].cardIni.color_second
        this.form[grade].bc_img = this.form[grade].cardIni.bc_img
      } else {
        if (e === 1) {
          this.form[grade].type = 1
          this.form[grade].color_first = ''
          this.form[grade].color_second = ''
          this.form[grade].bc_img = 'https://jm-cdn.jkule.com/good/1587757751.png'
        } else {
          this.form[grade].type = 2
          this.form[grade].color_first = '#cba071'
          this.form[grade].color_second = '#e1bf83'
          this.form[grade].bc_img = ''
        }
      }
    },
    //标记合伙人 隐藏/显示合伙人要求
    setCopartner(e, grade){
          this.form[grade].copartner = e
    },
    // 上传图片成功事件

    // 上传图片失败事件

    // 删除图片事件
    handleRemove(file) {
      console.log(file)
    },

    // 增加
    add() {
      // 加 - 形成初始化内容 , 为form增加数据 并 输出确认 / 等级选项增加
      var form = this.form
      var options = this.options
      var level = form.length
      console.log(level)
      var ini = {
        level: level,
        title: '会员' + level,
        jf_num: 0,
        jf: 0,
        recommend: { 'grade': 0, 'num': 0 },
        describe: '',
        icon: '',
        type: 2,
        color_first: '#cba071',
        color_second: '#e1bf83',
        bc_img: '',
        cardIni: { 'type': 2, 'color_first': '#cba071', 'color_second': '#e1bf83', 'bc_img': '' }
      }
      var grade = { value: level, label: '会员' + level }
      form.push(ini)
      options.push(grade)
      this.form = form
      this.options = options
      // 输出确认
      console.log(this.form)
      console.log(this.options)
    },

    // 减少事件
    del() {
      // 减 - 获取form数据 并 消除最后一位数据 并 输出确认 /  / 等级选项减少
      var form = this.form
      var options = this.options
      if (form.length === 1) {
        this.$message({
          showClose: true,
          message: '最少需要保留一个会员等级!',
          type: 'warning'
        })
        return
      }
      form.pop()
      options.pop()
      this.form = form
      this.options = options
      console.log(this.form)
      console.log(this.options)
    },

    // 关闭界面事件
    canel() {
      this.dialogFormVisible = false
    },

    // 提交事件
    sure() {
      handle({ data: this.form, id: this.id }).then(res => {
        Message({
          message: res.data.info,
          type: 'success',
          duration: 2000
        })
        this.$emit('afterSave')
        this.canel()
      })
    }
  }
}
</script>
<style>
.border_input{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 10px 20px;
  margin: 20px;
}
.block{
  margin-top: 20px;
}
</style>
